import React, {PureComponent} from 'react';
import {StyleSheet, View, Image, Text, TouchableWithoutFeedback} from 'react-native';

export default class extends PureComponent {
    render() {
        const {catList = []} = this.props;
        const {navigation} = this.props;
        return (
            <View style={styles.container}>
                {
                    catList.map(item =>
                        <TouchableWithoutFeedback key={item.id} onPress={() => {
                            navigation.navigate('goodsList', {cate_id: item.id, title: item.name})
                        }}>
                            <View style={styles.item}>
                                <Image source={{uri: item.icon}} style={styles.img}/>
                                <Text
                                    style={styles.link}
                                >{item.name}</Text>
                            </View>
                        </TouchableWithoutFeedback>
                    )
                }
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        height: 150,
        paddingLeft: 6,
        paddingRight: 6,
        paddingTop: 6,
        marginTop: 6,
        backgroundColor: '#fff',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-start',
        flexWrap: 'wrap'
    },
    item: {
        width: '25%',
        height: 60,
        marginBottom: 10,
        alignItems: 'center',
        justifyContent: 'center'
    },
    img: {
        width: 43,
        height: 43,
        marginBottom: 3
    },
    link: {
        fontSize: 12,
        color: '#6c6c6c',
        textAlign: 'center'
    }
});
